<template>
    <ProTable
        ref="proTableRef"
        :loading="table.isRefresh"
        controllerUrl="file"
        :data="table.data"
        :page="table.page"
        :columns="columns"
        :headerActionTypes="['upload', 'download', 'delete', 'batchDelete', 'search', 'dynamicQuery']"
        :columnActionTypes="['download', 'delete']"
        :queryFormItems="queryFormItems"
        :dynamicQuery="table.dynamicQuery"
        @onTableAction="onTableAction"
    ></ProTable>
</template>

<script setup lang="tsx">
import { FileType } from '@/api/system/file/type'
import { QueryFormItem } from '@/types/queryform'

const { table, proTableRef, onTableAction } = useTable({ api: new ProTableApi('file'), isPage: true, search: 'fileName' })

const columns = reactive<Array<TableColumnType<FileType>>>([
    {
        type: 'selection',
        align: 'center',
    },
    {
        type: 'index',
        label: '序号',
        align: 'center',
        width: '80',
    },
    {
        prop: 'fileName',
        label: '名称',
        showOverflowTooltip: true,
    },
    {
        prop: 'extension',
        label: '扩展名',
        align: 'center',
    },
    {
        prop: 'type',
        label: '文件类型',
        showOverflowTooltip: true,
    },
    {
        prop: 'fileDirectory',
        label: '文件夹',
        showOverflowTooltip: true,
    },
    {
        prop: 'size',
        label: '大小',
        align: 'center',
    },
    {
        prop: 'sizeFormat',
        label: '格式化大小',
        align: 'center',
    },
    {
        prop: 'url',
        label: 'URL',
        align: 'center',
        showOverflowTooltip: true,
    },
    {
        type: 'datetime',
        prop: 'createDateTime',
        default: 'YYYY-MM-DD HH:mm:ss',
        label: '创建时间',
        align: 'center',
        width: '200',
    },
])

const queryFormItems = reactive<Array<QueryFormItem<FileType>>>([
    {
        type: 'number',
        label: 'ID',
        name: 'id',
        placeholder: '文件ID',
    },
    {
        label: '名称',
        name: 'fileName',
        placeholder: '模糊查询',
    },
    {
        label: '扩展名',
        name: 'extension',
        placeholder: '模糊查询',
    },
    {
        label: '文件类型',
        name: 'type',
        placeholder: '模糊查询',
    },
    {
        label: '文件夹',
        name: 'fileDirectory',
        placeholder: '模糊查询',
    },
    {
        type: 'select',
        label: '排序字段',
        sort: 'Sort',
        options: (): SelectOptions[] => {
            const options: SelectOptions[] = []
            columns.forEach((item) => {
                if (item.prop && item.label) {
                    options.push({ label: item.label, value: item.prop })
                }
            })
            return options
        },
    },
    {
        type: 'boole',
        label: '顺序',
        sort: 'Order',
        options: (): SelectOptions[] => [
            { label: '顺序', value: true },
            { label: '倒序', value: false },
        ],
    },
    {
        type: 'datetime',
        label: '创建时间',
        name: 'createDateTime',
        dateType: 'datetimerange',
    },
    {
        type: 'datetime',
        label: '更新时间',
        name: 'lastUpdateDateTime',
        dateType: 'datetimerange',
    },
])
</script>

<style lang="scss" scoped></style>
